<template>
  <div class="sidebar">
    <div class="author sidebar-block shadow">
      <div class="block-title">关于作者</div>
      <div class="block-body">
        <router-link to="/user" class="user-item">
          <div class="author-photo">
            <img :src="author.photo" alt="作者头像">
          </div>
          <div class="info-box">
            <div class="username">{{author.name}}</div>
            <div class="position">{{author.sign}}</div>
          </div>
        </router-link>
        <!-- <div class="stat-item">
          <span class="iconfont zan">&#xe606;</span>
          <span class="content">获得赞数<span class="count">1</span></span>
        </div>
        <div class="stat-item">
          <span class="iconfont read">&#xe619;</span>
          <span class="content">获得阅读数<span class="count">1</span></span>
        </div> -->
      </div>
    </div>
    <div class="qqqun sidebar-block shadow">
      <a href="https://jq.qq.com/?_wv=1027&k=5brvYwT" class="qqlink">
        <img src="../../../../assets/img/qq.png" alt="点击加入qq群">
        <div class="qq-content">
          <p class="qq-content-title">点击加入QQ群</p>
          <p class="qq-content-con">意见收集与问题反馈</p>
        </div>
      </a>
      <div class="qqimg-big">
        <img src="../../../../assets/img/qq.png">
      </div>
    </div>
    <div class="about-entry sidebar-block shadow" :class="{fixed: this.sliderFixed}" ref="aboutEntry">
      <div class="block-title">相关文章</div>
      <router-link :to="'/article/'+item.id" class="item" v-for="item in this.list" :key="item.id">
        <div class="entry-title">
          {{item.title}}
        </div>
        <div class="entry-meta-box">
          <div class="entry-meta">
            <span class="iconfont">&#xe606;</span>
            <span class="count">{{item.praise}}</span>
          </div>
          <div class="entry-meta">
            <span class="iconfont">&#xe66d;</span>
            <span class="count">{{item.comment}}</span>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'articleSlider',
  props: {
    author: {},
    articleId: 0
  },
  data () {
    return {
      list: [],
      sliderFixed: false
    }
  },
  methods: {
    getOtherList () {
      this.$ajax({
        method: 'POST',
        url: '/web/php/list.php',
        data: this.$qs.stringify({
          type: 'get_articlepage_author_list',
          member_id: this.author.id,
          article_id: this.articleId
        })
      }).then((result) => {
        result = result.data
        if (result.returnCode === 10120) {
          this.list = result.dataInfo.list
        }
      })
    },
    handleScroll () {
      // console.log('侧边栏滚动')
      // let top = this.$refs.aboutEntry.offsetTop
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 卷去的高度
      // let cur = this.$refs.aboutEntry.offsetParent
      // while (cur != null) {
      //   top += cur.offsetTop
      //   cur = cur.offsetParent
      // }
      // console.log(top + '+' + document.documentElement.scrollTop)
      if (scrollTop >= 250) {
        this.sliderFixed = true
      } else {
        // console.log('000')
        this.sliderFixed = false
      }
    }
  },
  mounted () {
    this.getOtherList()
  },
  watch: {
    author () {
      this.getOtherList()
    }
  },
  created () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.sidebar
  position absolute
  width 4.8rem
  right 0
  top 0
  .sidebar-block
    background $theme-background
    .block-title
      padding .24rem .3rem
      font-size .28rem
      border-bottom 1px solid hsla(0,0%,58.8%,.1)
    &:not(last-child)
      margin-bottom .36rem
    &.author
      overflow hidden
      .user-item
        padding .3rem
        display flex
        .author-photo
          width 1rem
          overflow hidden
          border-radius 50%
          margin-right .24rem
          img
            width 100%
        .info-box
          min-width 0
          flex 1
          .username
            font-weight bold
            font-size .32rem
            ellipsis()
          .position
            margin-top .18rem
            color #72777b
            font-size .3rem
            ellipsis()
      .stat-item
        padding 0 .31rem
        margin-bottom .19rem
        &:last-child
          margin-bottom .31rem
        .iconfont
          background #e1efff
          color #7bb9ff
          padding .1rem
          border-radius 50%
          margin-right .2rem
          display inline-block
        .content
          font-size .3rem
          color $font-color
          .count
            margin 0 .1rem
    &.qqqun
      position relative
      &:hover
        .qqimg-big
          // display block
          right 105%
          top -.2rem
          opacity 1
          max-width 100%
          padding .3rem
      .qqimg-big
        position absolute
        right 100%
        top 0
        padding 0
        background $theme-background
        box-shadow 0 1px 5px 3px rgba(0,0,0,.05)
        transition all .3s
        max-width 0
        opacity 0
        overflow hidden
      .qqlink
        padding .31rem
        display flex
        align-items center
        .qq-content
          margin-left .2rem
          .qq-content-title
            font-weight bold
          .qq-content-con
            color $theme-3-color
            margin-top .14rem
        img
          height 1rem
          width 1rem
    &.about-entry
      &.fixed
        width 4.8rem
        position fixed
        top 72px;
      .item
        display block
        padding .2rem .32rem
        &:hover
          background $theme-2-background
        .entry-title
          font-size .28rem
          color $font-2-color
        .entry-meta-box
          margin-top .1rem
          display flex
          .entry-meta
            color $theme-4-color
            margin-right .36rem
            font-size .26rem
            display flex
            align-items center
            .iconfont
              font-size .26rem
            .count
              margin-left .1rem
  .shadow
    box-shadow 0 1px 2px 0 rgba(0,0,0,.05)
</style>
